<template>
  <block v-if="svgStyle">
    <view class="svg-render-container" :style="svgStyle" />
  </block>
</template>

<script setup>
/**
 * @description svg图片渲染
 * @property {string} imgSrc 图片地址
 * @property {Array} svgColors 图片颜色
 */
import {
  ref,
  watch
} from 'vue';
// 定义组件的 props
const props = defineProps({
  imgSrc: {
    type: String,
    required: true
  },
  svgColors: {
    type: Array,
    default: () => []
  },
});

// 定义一个响应式变量来存储 svg 样式
const svgStyle = ref('');

// 异步函数，用于获取 svg 文本
const getSvgText = async () => {
  try {
    let svgText = await new Promise((resolve, reject) => {
      uni.request({
        url: props.imgSrc,
        success: (res) => resolve(res.data),
        fail: reject,
      });
    });
    // 将获取到的 svg 文本传递给 svgToColorBase64 函数进行处理
    svgToColorBase64(svgText);
  } catch (error) {
    // 捕获并打印错误信息
    // console.error('获取svg文本失败：', error);
  }
};

// 函数，用于给 svg 文本染色并且转成 base64
const svgToColorBase64 = (svgText) => {
  let basestr = svgText;
  // 如果 svgColors 存在且非空数组
  if (props.svgColors && props.svgColors.length) {
    let a = 0;
    // 使用正则表达式匹配 SVG 文本中的 Hex 颜色值
    // 并用提供的 props.svgColors 数组中的颜色替换它们
    const baseColors = Array.isArray(props.svgColors) ? props.svgColors : [props.svgColors];
    basestr = svgText.replace(/#[a-zA-Z0-9]{3,6}/g, (word) => {
      const svgColor = baseColors[a++];
      // console.log('svgColor', svgColor)
      return svgColor ? svgColor : word;
    });
  }
  // 将 svg 数据进行 URL 编码
  basestr = encodeURIComponent(basestr);
  // 设置 svgStyle 的值，使其作为背景图片显示
  svgStyle.value = `background-image: url("data:image/svg+xml,${basestr}");`;
};

// 监听图片地址和颜色的变化
watch(
    () => [props.imgSrc, props.svgColors],
    () => {
      // 当图片地址或颜色变化时，重新获取 svg 文本
      getSvgText();
    }, {
      immediate: true
    } // 立即执行一次
);
</script>

<style scoped>
.svg-render-container {
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
</style>
